<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>登录</title>
    <!-- <link rel="stylesheet" href="text.css" /> -->
  </head>
  <script type="text/javascript" src="../static/js/jquery-3.7.1.min.js"></script>
  <style>
    .all {
      width: 800px;
      box-shadow: -10px 10px 25px rgba(210, 210, 210, 0.9);
      margin: auto;
      margin-top: 5%;
      display: flex;
      border-radius: 35px;
      background-color: #ffffff;
      height: 550px;
    }
    .log {
      width: 50%;
      margin: auto;
    }
    .reg {
      width: 50%;
      height: 100%;
      margin: auto;
      background-color: #20b2aa;
      border-radius: 35px;
      color: #ffffff;
    }
    .reg_1 {
      text-align: center;
      margin: auto;
      margin-top: 50%;
    }
    .reg_1 h2 {
      font-weight: 700;
    }
    .reg_1 p {
      margin: 15px 0px 25px 0px;
    }
    .sig {
      width: 70px;
      height: 30px;
      border-radius: 12px;
      background-color: #20b2aa;
      border-color: #fff;
      color: #ffffff;
    }
    #tiao {
      padding: 0em 0;
    }
    .reg_1 a {
      color: #ffffff;
    }
    h3 {
      font-size: 3em;
      color: black;
      padding-bottom: 1em;
      margin: 0;
      text-align: center;
      font-family: "Marvel-Regular";
    }
    .input {
      margin: 10px 50px;
      width: 300px;
      height: 70px;
    }
    span {
      color: #999;
      font-size: 0.85em;
      padding-bottom: 0.2em;
      display: block;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .input-text {
      border: 1px solid #555;
      outline-color: #fd9f3e;
      width: 90%;
      font-size: 1em;
      padding: 0.5em;
      line-height: inherit;
    }
    .register-top-grid {
      color: black;
      padding-bottom: 1em;
      margin: 0;
      font-family: "Marvel-Regular";
      margin: 10px 0;
    }
    .text-center {
      text-align: center;
    }
    .tijiao {
      color: rgb(255, 253, 253);
      width: 80px;
      height: 35px;
      background-color: rgb(241, 52, 10);
      border: none;
    }
  </style>
  <body>
    <div class="all">
      <div class="log">
        <div class="register">
          <form action="/gologin" method="post">
            <div class="register-top-grid">
              <h3>用户登录</h3>
              <div class="input">
                <span>用户名 <label style="color: red">* </label></span>
                <input id="userName"
                  type="text"
                       name = "userName"
                  placeholder="请输入用户名"
                  class="input-text"
                />
              </div>
              <div class="input">
                <span>密码 <label style="color: red">*</label></span>
                <input id="password"
                  type="password" name = "password"
                  placeholder="请输入密码"
                  class="input-text"
                />
              </div>
            </div>
            <div class="text-center">
              <input
                class="tijiao"
                value="提交"
                type="submit"
              ></input>
            </div>
          </form>
        </div>
      </div>
      <div class="reg">
        <div class="reg_1">
          <h2>没有账号？</h2>
          <p>立即注册加入我们吧，和我们一起开启旅程吧</p>
          <a href="/register.html">
            <button type="primary" class="sig">注册</button>
          </a>
        </div>
      </div>
    </div>
  </body>
    <script>
        function goLogin(){
            let userName = document.getElementById("userName").value;
            let password = document.getElementById("password").value;
            alert(userName + " " + password);
            $.ajax({
                url:'/gologin',
                type:'post',
                dataType:'json',
                data:{
                   'userName':userName,
                   'password' :password
                },
                success:function (response){
                    alert(response.msg);
                },
                error:function (xhr, status, error){
                    alert("error");
                }
            });
        }
    </script>
</html>
{#<!DOCTYPE html>#}
{#<html lang="en">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <title>登录</title>#}
{#    <script type="text/javascript" src="../static/js/jquery-3.7.1.min.js"></script>#}
{#</head>#}
{#<body>#}
{#<div>#}
{#    <label>用户名：</label><input id="userName" type="text" placeholder="请输入用户名"><br>#}
{#    <label>密码：</label><input id="password" type="password" placeholder="请输入密码">#}
{#    <button id="login" onclick="goLogin();">登录</button>#}
{#</div>#}
{##}
{#</body>#}
{#    <script>#}
{#        function goLogin(){#}
{#            let userName = document.getElementById("userName").value;#}
{#            let password = document.getElementById("password").value;#}
{#            alert(userName + " " + password);#}
{#            $.ajax({#}
{#                url:'/gologin',#}
{#                type:'post',#}
{#                dataType:'json',#}
{#                data:{#}
{#                   'userName':userName,#}
{#                   'password' :password#}
{#                },#}
{#                success:function (response){#}
{#                    alert(response.msg);#}
{#                },#}
{#                error:function (xhr, status, error){#}
{#                    alert("error");#}
{#                }#}
{#            });#}
{#        }#}
{#    </script>#}
{#</html>#}